@import '../common_style.less';
.aj-page-list {
	li {
		clear: both;
		overflow: hidden;
		background-color: white;
		padding-right: 1%;
		
		.ajaxjs-imgHolder {
			width: 29%;
			float: left;
			margin: 2%; 
			margin-right:3%;
			
			img {
				opacity: 0;
				transition: opacity 300ms ease-in;
				&.tran {
					opacity: 1;
				}
			}
		}

		.item {
			border-bottom: 1px solid lightgray;
			overflow: hidden;
			padding: 3% 0;
			h1 {
				font-size: 1rem;
				min-height: 3.1rem; // 三倍字体的高度
				line-height: 140%;
			}

			h2 {
				font-size: .9rem;
				color: gray;
				font-weight: normal;
			}
		}

		.createTime {
			font-size: .8rem;
			text-align: right;
			color: gray;
//			margin-top: 1%;
			margin-right: 2%;
		}
	}

	footer {
		text-align: center;
		font-size: .95rem;
		letter-spacing: 2px;
		margin: 2%;
		input {
			.aj-input;
			text-align: center;
			height: 22px;
		}

		.info {
			margin-top: 1%;
			margin-bottom: 3%;
			font-size: .9rem;
			color: gray;
		}
	}

	select {
		.aj-select;
		text-align: center;
		width: 40px;
		height: 22px;
		vertical-align: bottom;
	}
}

// 列表
.ajaxjs-ul-list (@columns) {
	clear: both;
	overflow: hidden;
	& when (@columns=3) {
		padding-left: 1%;
	}

	li {
		float: left;
		overflow: hidden;
		box-sizing: border-box;
		list-style: none;
		& when (@columns=2) {
			width: 48%;
			&:nth-of-type(odd) {
				margin-left: 1.3%;
				margin-right: 1.3%;
			}

			&:nth-of-type(even) {
				margin-right: 1.4%;
			}
		}

		& when (@columns=3) {
			width: 33.3%;
			padding-right: 1%;
		}

		& when (@columns=4) {
			width: 25%;
			padding-right: 1%;
		}
	}
}

.ajaxjs-ul-list-2cols  {
	.ajaxjs-ul-list (3);
}

.aj-tree {
	font-size: .9rem;
	margin-left: 5px;
	.item {
		cursor: pointer;
	}

	.bold {
		font-weight: bold;
	}

	ul {
		line-height: 1.5em;
		margin-left: 1.5rem;
		border-left: 1px dotted lightgray;
	}

	.node > span {
		font-weight: normal;
		color: lightgray;
	}

	.bold:before {
		content: 'o';
		margin: -5px;
		color: lightgray;
	}

	.show {
		animation: hideIndex 0.3s;
		-moz-animation: hideIndex 0.3s;
		-webkit-animation: hideIndex 0.3s;
		-o-animation: hideIndex 0.3s;
	}

	@keyframes hideIndex {
		0%{
			opacity: 0;
			transform: translate3d(0, -10px, 0);
		}

		100%{
			opacity: 1;
			transform: translate3d(0, 0px, 0);
		}
	}
}

.aj-process-line {
	display: flex;
	padding: 5%;
	justify-content: center;
	.process-line {
		font-size: 18px;
		color: lightgray;
		font-weight: bold;
		& > div {
			float: left;
			width: 156px;
			text-align: center;
			position: relative;
			&.current {
				color: @mainColor;
				span {
					background-color: @mainColor;
				}
			}

			&.done {
//				color: lighten(@mainColor, 80%);
				span{
//					background-color: lighten(@mainColor, 50%);
				}
				&::after {
//					background-color: lighten(@mainColor, 50%);
				}
			}

			p{
				font-size: 1rem;
			    letter-spacing: 3px;
			    padding-top: 5%;
			}
			span {
				display: inline-block;
				width: 32px;
				height: 32px;
				border-radius: 50%;
				color: #fff;
				line-height: 32px;
				font-size: 16px;
				background-color: lightgray;
				position: relative;
				z-index: 1;
			}

			&:last-child::after {
				display: none;
			}

			&::after {
				content: '';
				position: absolute;
				top: 14px;
				left: 94px;
				width: 124px;
				height: 4px;
				background-color: lightgray;
			}
		}
	}
}